<template>
    <view class="page">
        <view class="row">
            <view class="label">地址</view>
            <view class="content" @click="onChoose">
                <!-- <text class="c-ccc">请选择地址</text> -->
                <input v-model="state.address" readonly placeholder="请选择地址" />
            </view>
        </view>

        <view class="row">
            <view class="label">类型</view>
            <view class="content">
                <radio-group @change="onTypeChange">
                    <radio value="buy" :checked="state.type === 'buy'">买</radio>
                    <radio value="sell" :checked="state.type === 'sell'">卖</radio>
                </radio-group>
            </view>
        </view>

        <view class="row">
            <view class="label">说明</view>
            <view class="content">
                <input v-model="state.message" placeholder="请输入说明" />
            </view>
        </view>

        <view class="row">
            <view class="label">联系方式</view>
            <view class="content">
                <input v-model="state.contact" type="number" maxlength="11" placeholder="请输入联系方式" />
            </view>
        </view>

        <button class="btn" :loading="loading" @click="onSubmit">发布</button>
    </view>
</template>

<script setup lang="ts">
// getCurrentInstance 获取当前组件实例的一个方法
import { reactive, ref, getCurrentInstance } from "vue";
import { useUserStore } from "@/stores/user";

const userStore = useUserStore();

// 获取当前组件的实例
const instance: any = getCurrentInstance();

const loading = ref(false);
const state = reactive({
    address: "", // 地址
    lat: 0, // 纬度
    lng: 0, // 经度
    message: "", // 说明
    contact: "", // 联系方式
    type: "buy", // 类型 buy-买 sell-卖
});

// 勾选框change事件
const onTypeChange = (event: any) => {
    state.type = event.detail.value;
};

// 选择地址
const onChoose = () => {
    uni.chooseLocation({
        // 问题： 不能写死经纬度。
        //      1. 从首页进入到这个页面时，将首页获取到的经纬度作为传递传递过来
        //      2. 使用状态管理器
        latitude: userStore.latitude,
        longitude: userStore.longitude,
        success: (res) => {
            console.log(res, "res");
            state.address = res.address;
            state.lat = res.latitude;
            state.lng = res.longitude;
        },
    });
};

// 发布
const onSubmit = () => {
    // 表单校验
    if (!state.address) {
        return uni.showToast({ icon: "none", title: "请选择地址" });
    }

    if (!state.message || !state.contact) {
        return uni.showToast({ icon: "none", title: "请完善数据" });
    }

    // 手机号校验
    if (!/^1\d{10}$/.test(state.contact)) {
        return uni.showToast({ icon: "none", title: "请输入正确的手机号" });
    }

    loading.value = true;
    // 调用接口
    uni.request({
        url: "http://localhost:3000/trades",
        method: "POST",
        data: state,
        success: (res) => {
            uni.showToast({ icon: "none", title: "发布成功" });

            // 使用通道对象触发一个 refresh 事件
            const eventChannel = instance.ctx.getOpenerEventChannel();
            eventChannel.emit("refresh");

            // 回退到上一页
            uni.navigateBack();
        },
        complete: () => {
            loading.value = false;
        },
    });
};
</script>
